<template>
  <div class="nav">
    <el-menu :default-active="index" router @select="navChosed" :collapse="isCollapse" class="el-menu-vertical-demo" :background-color="theme.backgroundColor" :text-color="theme.textColor" :active-text-color="theme.activeTextColor">
      <el-menu-item index="/menus">
        <i class="iconfont icon-caidan"></i>
        <span slot="title">菜单</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="iconfont icon-caidan"></i>
          <span>demo</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/demo">demo1</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import theme from "@/assets/theme/theme.js";
export default {
  name: "Nav",
  data() {
    return {
      isCollapse: false,
      showNav: false,
      index: "/menus",
      theme: theme.nav
    };
  },
  created() {
    if (document.documentElement.clientWidth <= 1366) {
      this.isCollapse = true;
    }
    window.onresize = () => {
      let clientWidth = document.documentElement.clientWidth;
      if (clientWidth <= 1366) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    };
    // nav默认激活状态
    this.index = sessionStorage.getItem("index") ? sessionStorage.getItem("index") : "/menus";
  },
  methods: {
    navChosed(value) {
      this.index = value;
      sessionStorage.setItem("index", value);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/theme/theme";
.nav {
  width: 250px;
  position: absolute;
  top: 70px;
  left: 0;
  border-right: 2px solid #e6e6e6;
  .el-menu {
    padding-top: 57px;
    padding-bottom: 1000px;
    box-shadow: 11px 0px 21px 0px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    span {
      padding-left: 15px;
    }
  }
  .el-menu-item.is-active {
    background-color: @navIsActive !important;
  }
}
</style>
